<template>
  <div class="home">
    <div class="content">
      <h1 class="title">
        <span>在</span>
        <span>线</span>
        <span>考</span>
        <span>试</span>
        <span>系</span>
        <span>统</span>
      </h1>
      
      <div class="select-container">
        <div class="select-item">
          <span class="label">考试人员</span>
          <select v-model="selectedUser" @change="handleUserChange">
            <option value="">请选择考试人员</option>
            <option v-for="user in examUsers" :key="user.id" :value="user">
              {{ user.name }}
            </option>
          </select>
        </div>

        <div class="select-item">
          <span class="label">试卷选择</span>
          <select v-model="selectedExam" :disabled="!selectedUser" @change="handleExamChange">
            <option value="">请选择试卷</option>
            <option v-for="exam in availableExams" :key="exam.record_id" :value="exam">
              {{ exam.fields['试卷名称'][0].text }}
            </option>
          </select>
        </div>
      </div>

      <div class="button-container">
        <button class="start-button" @click="startExam" :disabled="!selectedExam">
          开始考试
        </button>
      </div>

      <div class="exam-detail" v-if="selectedExam">
        <h2>试卷概要</h2>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">题库分类：</span>
            <span class="info-value">{{ selectedExam.fields['题库分类'] }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">试卷编号：</span>
            <span class="info-value">{{ selectedExam.record_id }}</span>
          </div>
          <div class="info-item score-item">
            <span class="info-label">单选题：</span>
            <span class="info-value">
              {{ selectedExam.fields['单选数量'] }}题 × {{ selectedExam.fields['单选分值'] }}分
              <span class="total-score">
                = {{ selectedExam.fields['单选数量'] * selectedExam.fields['单选分值'] }}分
              </span>
            </span>
          </div>
          <div class="info-item score-item">
            <span class="info-label">多选题：</span>
            <span class="info-value">
              {{ selectedExam.fields['多选数量'] }}题 × {{ selectedExam.fields['多选分值'] }}分
              <span class="total-score">
                = {{ selectedExam.fields['多选数量'] * selectedExam.fields['多选分值'] }}分
              </span>
            </span>
          </div>
          <div class="info-item score-item">
            <span class="info-label">判断题：</span>
            <span class="info-value">
              {{ selectedExam.fields['判断数量'] }}题 × {{ selectedExam.fields['判断分值'] }}分
              <span class="total-score">
                = {{ selectedExam.fields['判断数量'] * selectedExam.fields['判断分值'] }}分
              </span>
            </span>
          </div>
          <div class="info-item score-item">
            <span class="info-label">填空题：</span>
            <span class="info-value">
              {{ selectedExam.fields['填空数量'] }}题 × {{ selectedExam.fields['填空分值'] }}分
              <span class="total-score">
                = {{ selectedExam.fields['填空数量'] * selectedExam.fields['填空分值'] }}分
              </span>
            </span>
          </div>
          <div class="info-item score-item">
            <span class="info-label">简答题：</span>
            <span class="info-value">
              {{ selectedExam.fields['简答数量'] }}题 × {{ selectedExam.fields['简答分值'] }}分
              <span class="total-score">
                = {{ selectedExam.fields['简答数量'] * selectedExam.fields['简答分值'] }}分
              </span>
            </span>
          </div>
          <div class="info-item total-item">
            <span class="info-label">总分：</span>
            <span class="info-value total-value">
              {{ getTotalScore(selectedExam) }}分
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useExamStore } from '../stores/exam'

// 路由实例
const router = useRouter()
// 考试状态管理实例
const examStore = useExamStore()
// 选中的考试人员
const selectedUser = ref('')
// 选中的试卷
const selectedExam = ref(null)
// 试卷详情数据
const examDetail = ref(null)
// 加载状态
const loading = ref(true)

// 获取所有考试人员（去重）
const examUsers = computed(() => {
  const userMap = new Map()
  examStore.examList.forEach(exam => {
    exam.fields['未完成考试人员'].value.forEach(user => {
      if (!userMap.has(user.id)) {
        userMap.set(user.id, user)
      }
    })
  })
  return Array.from(userMap.values())
})

// 获取当前用户可用的试卷
const availableExams = computed(() => {
  if (!selectedUser.value) return []
  return examStore.examList.filter(exam => 
    exam.fields['未完成考试人员'].value.some(
      user => user.id === selectedUser.value.id
    )
  )
})

// 处理用户选择变化
const handleUserChange = () => {
  selectedExam.value = null
  // 自动选择第一个试卷
  if (availableExams.value.length > 0) {
    selectedExam.value = availableExams.value[0]
  }
}

// 处理试卷选择变化
const handleExamChange = () => {
  // 可以添加额外的处理逻辑
}

// 开始考试
const startExam = () => {
  router.push({
    path: `/exam/${selectedExam.value.record_id}`,
    query: {
      examData: JSON.stringify({
        exam: {
          id: selectedExam.value.record_id,
          name: selectedExam.value.fields['试卷名称'][0].text,
          category: selectedExam.value.fields['题库分类'],
          counts: {
            single: selectedExam.value.fields['单选数量'],
            multi: selectedExam.value.fields['多选数量'],
            judge: selectedExam.value.fields['判断数量'],
            fill: selectedExam.value.fields['填空数量'],
            essay: selectedExam.value.fields['简答数量']
          },
          scores: {
            single: selectedExam.value.fields['单选分值'],
            multi: selectedExam.value.fields['多选分值'],
            judge: selectedExam.value.fields['判断分值'],
            fill: selectedExam.value.fields['填空分值'],
            essay: selectedExam.value.fields['简答分值']
          }
        },
        user: {
          id: selectedUser.value.id,
          name: selectedUser.value.name
        }
      })
    }
  })
}

// 计算总分
const getTotalScore = (exam) => {
  if (!exam) return 0
  return ['单选', '多选', '判断', '填空', '简答'].reduce((total, type) => {
    return total + (exam.fields[`${type}数量`] * exam.fields[`${type}分值`])
  }, 0)
}

onMounted(async () => {
  await examStore.fetchExamList()
})
</script>

<style scoped>
.home {
  min-height: 100vh;
  background: url('/bg-pattern.png') center/cover fixed;
  padding: 60px 20px;
}

.content {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.85);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.title {
  text-align: center;
  margin-bottom: 40px;
  color: #2c3e50;
  font-size: 32px;
}

.title span {
  margin: 0 8px;
  display: inline-block;
  transition: transform 0.3s;
}

.title span:hover {
  transform: translateY(-5px);
}

.select-container {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.select-item {
  flex: 1;
}

.label {
  display: block;
  margin-bottom: 8px;
  color: #34495e;
  font-weight: 500;
}

select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  color: #2c3e50;
  background: transparent;
  transition: all 0.3s;
}

select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.button-container {
  text-align: center;
  margin: 30px 0;
}

.start-button {
  background: linear-gradient(135deg, #3498db, #2ecc71);
  color: white;
  padding: 16px 40px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.2);
  position: relative;
  overflow: hidden;
}

.start-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: 0.5s;
}

.start-button:hover:not(:disabled)::before {
  left: 100%;
}

.start-button:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(46, 204, 113, 0.3);
}

.start-button:active:not(:disabled) {
  transform: translateY(0);
}

.start-button:disabled {
  background: linear-gradient(135deg, #bdc3c7, #95a5a6);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.exam-detail {
  margin-top: 30px;
  padding: 20px 0;
  border-top: 1px dashed #ddd;
}

.exam-detail h2 {
  color: #7f8c8d;
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: normal;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.info-label {
  color: #7f8c8d;
  width: 80px;
  font-size: 14px;
}

.info-value {
  color: #34495e;
  font-size: 14px;
}

.score-item .info-value {
  display: flex;
  align-items: center;
  gap: 8px;
}

.total-score {
  color: #7f8c8d;
  font-size: 13px;
}

.total-item {
  grid-column: 1 / -1;
  border-top: 1px dashed #ddd;
  margin-top: 10px;
  padding-top: 15px;
}

.total-value {
  color: #e74c3c;
  font-size: 16px;
  font-weight: 600;
}
</style> 